<template>
	<view class="page">
		<view class="page-cencont">
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="imgCode"
						placeholder="请输入图片验证码" />

					<image @click="refreshsrc" class="codeimg" :src="srcs" mode="" />
				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="phone"
						placeholder="请输入注册时的手机号" />

					<button v-if="!disabled" size="mini" class="phonecode" @click="getPhonCode">获取验证码</button>
					<button v-if="disabled" class="phonecode2">{{ countdown }}秒后重新获取</button>
				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="phonecode"
						placeholder="请输入验证码" />

				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="passwd"
						placeholder="请输入密码" />


				</view>
			</view>
			<view class="confimr" @click="resetPassword">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		data() {
			return {
				checked: false,
				srcs: '',
				//图片验证码src
				countdown: 60,
				// 初始倒计时时间，单位：秒
				disabled: false,
				// 按钮是否禁用
				// 表单数据
				phone: '',
				//手机号
				imgCode: '',
				//图片验证码
				phonecode: '',
				//手机验证码
				passwd: '',
				//密码
				//设备ID
				DeviceID: '',

			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.refreshsrc();
		},
		onShow() {
			this.refreshsrc();
		},

		methods: {

			async resetPassword() {
				function showErrorToast(message) {
					uni.showToast({
						title: message,
						icon: 'none'
					});
				}
				if (!this.phone.trim()) {
					showErrorToast('请输入手机号');
					return;
				}
				if (!/^[0-9]{11}$/.test(this.phone.trim())) {
					showErrorToast('手机号格式不对');
					return;
				}
				if (!this.imgCode.trim()) {
					showErrorToast('请输入图形码');
					return;
				}
				if (!this.phonecode.trim()) {
					showErrorToast('请输入验证码');
					return;
				}
				if (!this.passwd.trim()) {
					showErrorToast('请输入密码');
					return;
				}

				const res = await util.request(
					api.resetPasswordUrl, {
						"code": this.phonecode,
						"passwd": this.passwd,
						"phone": this.phone,
						"tenantId": 3
					},
					'POST'
				);
				// console.log(res)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else{
					uni.showToast({
						title: '重置密码成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						}, 1000);
					})
				}
			},

			// 获取图片验证码
			async refreshsrc() {
				const randomString = this.generateRandomString(6);
				this.DeviceID = randomString
				this.srcs = api.ImgCodeUrl + "?DeviceID=" + this.DeviceID;
			},

			// 生成字符串
			generateRandomString(length) {
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < length; i++) {
					const randomIndex = Math.floor(Math.random() * characters.length);
					result += characters.charAt(randomIndex);
				}
				return result;
			},
			async getPhonCode() {
				if (!this.imgCode.trim()) {
					uni.showToast({
						title: '请输入图形码',
						icon: 'none'
					});
					return;
				}
				if (!this.phone.trim()) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return;
				}
				const res = await util.request(
					api.PhoneCodeUrl, {
						"deviceID": this.DeviceID,
						"imgCode": this.imgCode,
						"phone": this.phone,
						"tenantId": 3
					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});

					let countdown = this.countdown;

					this.disabled = true

					let timer = setInterval(() => {
						countdown--;


						this.countdown = countdown
						// 倒计时结束
						if (countdown <= 0) {
							clearInterval(timer);
							// 恢复按钮可点击状态
							this.countdown = 60,
								this.disabled = false
						}
					}, 1000);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 1px;
	}

	.page-cencont {
		margin-top: 50px;
		margin-left: 25px;
		margin-right: 25px;
	}

	.item {
		height: 45px;
		margin-top: 15px;

	}

	.account {
		display: flex;
		border-bottom: 1px solid #F4F4F4;
		padding: 0px 15px;
		box-sizing: border-box;
		font-size: 14px;
		align-items: center;
	}

	.account input {
		// padding-left: 20rpx;
		// width: 80%;
		flex: 1;
	}

	/* 图片验证码 */
	.codeimg {
		width: 75px;
		height: 40px;
	}

	.inp-palcehoder {
		font-size: 26rpx;
	}

	/* 短信验证码 */
	.phonecode {
		height: 35px;
		border: 1px solid #6699F2;
		padding: 0px 10px;
		text-align: center;
		line-height: 35px;
		color: #6699F2;
		font-size: 15px;
	}

	.phonecode2 {
		height: 35px;
		border: 1px solid #6699F2;
		padding: 0px 10px;
		text-align: center;
		line-height: 35px;
		color: #767676;
		font-size: 15px;
	}

	.confimr {
		height: 45px;
		font-size: 20px;
		margin-top: 35px;
		background-color: #6A9FFB;
		text-align: center;
		color: #fff;
		line-height: 45px;
		border-radius: 30px;
	}
</style>